import React, { useState } from "react";
import "./App.css";
import { BrowserRouter, Route, Routes, NavLink } from "react-router-dom";
import { Layout, Menu } from "antd";
import { routes, RoutesProps } from "./routes";
import FundPage from "./pages/FundPage";
import TestPage from "./pages/TestPage";
import Clock from "./pages/Clock/Clock";
import ThreeMap from "./pages/ThreeMap";
import CusXlsx from "./pages/xlsx";
import Animation3D from "./pages/Animation";
import Fastapi from "./pages/FastAPI";

const { Sider, Content } = Layout;

const resolveMenu = (routeArrays: RoutesProps[]) => {
  return routeArrays.map((route: RoutesProps, index: number) => {
    if (route.routes) {
      return {
        children: resolveMenu(route.routes),
        key: `route-${index}`,
        title: route.name,
        label: route.name,
      };
    } else {
      return {
        key: route.path,
        label: <NavLink to={route.path || ""}> {route.name}</NavLink>,
        title: route.name,
      };
    }
  });
};

const renderRouter = () => {
  return (
    <Routes>
      <Route path="/" element={null} />
      <Route path="fund-page/" element={<FundPage />} />
      <Route path="test-page/" element={<TestPage />} />
      <Route path="test-style/" element={<Clock />} />
      <Route path="three-example/" element={<ThreeMap />} />
      <Route path="xlsx-example/" element={<CusXlsx />} />
      <Route path="rect3d/" element={<Animation3D />} />
      <Route path='fastapi/' element={<Fastapi />} />
    </Routes>
  );
};

function App() {
  // const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState(false);
  return (
    <div className="App">
      {process.env.NODE_ENV === "production" ? (
        <BrowserRouter basename="/desertstar/">{renderRouter()}</BrowserRouter>
      ) : (
        <BrowserRouter>
          <Layout className="layout">
            <Sider
              className="sider-layout"
              collapsible
              collapsed={collapsed}
              onCollapse={setCollapsed}
            >
              <Menu mode="inline" theme="dark" items={resolveMenu(routes)}>
                {/* {resolveMenu(routes)} */}
              </Menu>
            </Sider>
            <Layout>
              <Content>{renderRouter()}</Content>
            </Layout>
          </Layout>
        </BrowserRouter>
      )}
    </div>
  );
}

export default App;
